<template>
	<!-- 兑换页面 -->
	<div class="container">
		<!-- 账号姓名 -->
		<div class="alipay-count">
			<span>支付宝账号</span>
			<input type="number" placeholder="请输入支付包账号" />
		</div>
		<hr style="margin-left: .3rem;" />
		<div class="alipay-count">
			<span>真实姓名</span>
			<input type="number" placeholder="请输入真实姓名" />
		</div>
		<!-- 分割线 -->
		<hr style="height: .3rem;" />
		<!-- 兑换积分 -->
		<div class="integral-wrapper">
			<span class="title">兑换积分</span>
			<input type="number" placeholder="请输入兑换积分数量" max="8" />
			<hr style="width: 100%;height: .02rem;margin: .3rem 0rem;" />
			<p>
				<span>可兑换积分&nbsp;&nbsp;</span>
				<span>1000</span>
			</p>
			<p>
				<img src="../../assets/icon/shop-icon/zhuyi.png" />
				<span>每笔兑换积分手续费5元</span>
			</p>
		</div>
		<div class="confirm-exchange">确认兑换</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container {
		background: #fff;
		.alipay-count {
			padding: .3rem;
			padding-right: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.integral-wrapper {
			padding: .3rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			color: #9B9B9B;

			input {
				margin-top: .9rem;
				border-bottom: .01rem solid #F6F6F6;
				font-size: 35px;
			}
			p:nth-of-type(1) {
				font-size: 14px;
				margin-bottom: .2rem;
				span:nth-child(2) {
					color: #F5A623;
				}
			}
			p:last-child {
				display: flex;
				align-items: center;
				img {
					width: .36rem;
					margin-right: .1rem;
				}
			}
		}
	}

	input::-webkit-input-placeholder {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #9B9B9B;
	}
	
	.confirm-exchange {
		width: 5.82rem;
		height: 1rem;
		margin-top: 1.1rem;
		background-image: linear-gradient(-119deg, #3AB8FF 0%, #218BFB 100%);
		border-radius: 5px;
		text-align: center;
		line-height: 1rem;
		color: #fff;
		margin-left: .84rem;
		position: absolute;
	}
</style>
